import React, { useState, useEffect } from 'react'
import { Table, Button, Tag, Modal, Popover, Switch } from 'antd';
import {
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons';
import http from "../../../util/http"
const { confirm } = Modal;
export default function Right() {
  const [dataSource, SetdataSource] = useState([])
  useEffect(() => {
    http.get("/rights?_embed=children").then(res => {
      const list = res.data;
      list.forEach(item => {
        if (item.children.length === 0) return item.children = ""
      })
      SetdataSource(list)
    })
  }, [])

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '权限名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render: (key) => {
        return <Tag color="magenta">{<b style={{ fontSize: 16 }}>{key}</b>}</Tag>
      }
    },
    {
      title: '操作',
      render: (item) => {
        return <div>
          <Popover title="Title" trigger={item.pagepermisson === undefined ? "" : "click"} content={
            <div style={{ textAlign: "center" }}>
              <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={item.pagepermisson}
                onChange={() => switchChange(item)}
              > </Switch>
            </div>
          }>
            <Button type="primary" shape="circle" icon={<EditOutlined />} style={{ marginRight: "10px" }}
              disabled={item.pagepermisson === undefined}
            />
          </Popover>
          <Button type="primary" danger shape="circle" icon={<DeleteOutlined />} onClick={() => remove(item)} />
        </div>
      }
    },
  ];
  const switchChange = (item) => {
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1;
    SetdataSource([...dataSource])
    if (item.grade === 1) {
      http.patch(`/rights/${item.id}`, {
        pagepermisson: item.pagepermisson
      })
    } else {
      http.patch(`/children/${item.id}`, {
        pagepermisson: item.pagepermisson
      })
    }
  }
  // 点击删除按钮
  const remove = (item) => {
    confirm({
      title: '确定删除吗?',
      // icon: <ExclamationCircleOutlined />,
      // content: '请谨慎操作！！！',
      onOk() {
        del(item)
      },
      onCancel() {
        return
      },
    });
  }
  // 删除操作
  function del(item) {
    // 拿到当前元素
    if (item.grade === 1) {
      SetdataSource(dataSource.filter(data => data.id !== item.id))
    } else {
      // 拿到上一级元素
      let list = dataSource.filter(data => data.id === item.rightId)
      //匹配当前元素
      list[0].children = list[0].children.filter(data => data.id !== item.id)
      SetdataSource([...dataSource])
    }
  }
  // 修改
  // function edit(item) {

  // }
  return (
    <Table dataSource={dataSource} columns={columns} pagination={{
      pageSize: 5
    }} />
  )
}
